<template>
  <view class="page">
    <view class="tabs-top">
      <view class="tab" :class="{ active: tab==='todo' }" @tap="tab='todo'">待处理</view>
      <view class="tab" :class="{ active: tab==='doing' }" @tap="tab='doing'">处理中</view>
      <view class="tab" :class="{ active: tab==='done' }" @tap="tab='done'">已完成</view>
    </view>

    <view class="card">
      <text class="mini-title">质检列表</text>
      <view class="list">
        <view class="q-item" v-for="r in filtered" :key="r.id">
          <view>
            <text class="title">{{ r.title }}</text>
            <text class="sub">编号 {{ r.no }} · {{ r.time }}</text>
            <view class="tags">
              <text class="tag" v-for="t in r.tags" :key="t">{{ t }}</text>
            </view>
          </view>
          <view class="ops">
            <button class="btn-outline" @tap="preview(r)">预览</button>
            <button class="btn-primary" @tap="open(r)">处理</button>
          </view>
        </view>
      </view>
    </view>

    <view class="overlay" :class="{ show: showSheet }" @tap="onMaskTap">
      <view class="sheet" @tap.stop>
        <view class="drag" />
        <view class="sheet-header">
          <text class="sheet-title">质检详情 - {{ current?.no }}</text>
          <button class="icon-btn" @tap="close">✕</button>
        </view>
        <scroll-view class="sheet-body" scroll-y>
          <text class="mini-title">问题定位</text>
          <view class="kv">
            <text class="k">维度</text><text class="v">{{ current?.dim }}</text>
            <text class="k">严重级别</text><text class="v warn">{{ current?.level }}</text>
            <text class="k">描述</text><text class="v">{{ current?.desc }}</text>
          </view>
          <text class="mini-title">处置</text>
          <view class="footer">
            <button class="btn-outline" @tap="noop">指派</button>
            <button class="btn-primary" @tap="markDone">标记完成</button>
          </view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tab: 'todo',
      list: [
        { id: 1, no: 'Q-20250912-001', title: '病历缺少过敏史', time: '10:12', tags: ['必填项','过敏'], dim: '完整性', level: '中', desc: '初诊病历未填写过敏史' , status:'todo'},
        { id: 2, no: 'Q-20250912-002', title: '处方频次异常', time: '10:21', tags: ['处方','频次'], dim: '合理性', level: '高', desc: '布洛芬 q2h 可能不合理', status:'todo' },
        { id: 3, no: 'Q-20250912-003', title: '体温单位错误', time: '09:55', tags: ['单位'], dim: '规范性', level: '低', desc: '体温单位应为 ℃', status:'doing' }
      ],
      showSheet: false,
      current: null
    }
  },
  computed: {
    filtered() {
      return this.list.filter(i => i.status === this.tab)
    }
  },
  methods: {
    preview(r) { uni.navigateTo({ url: '/pages/medical/index' }) },
    open(r) { this.current = r; this.showSheet = true },
    close() { this.showSheet = false },
    markDone() { if (this.current) { this.current.status = 'done'; this.close() } },
    onMaskTap(e) { if (e.target.classList.contains('overlay')) this.close() },
    noop() {}
  }
}
</script>

<style>
.page { padding: 12px; background: linear-gradient(180deg, #eef3fb, #f8fafc); min-height: 100vh }
.tabs-top { display:flex; gap: 12rpx; margin-bottom: 12rpx }
.tab { padding: 10rpx 18rpx; border-radius: 16rpx; background: #f1f5f9; font-size: 22rpx; font-weight: 600; color: #334155 }
.tab.active { background: rgba(42,125,225,0.12); color: #2a7de1 }
.card { background:#fff; border: 2rpx solid #e6e8ee; border-radius: 28rpx; box-shadow: 0 16rpx 48rpx rgba(16,24,40,.08); padding: 20rpx }
.mini-title { font-size: 22rpx; color:#667085; margin-bottom: 10rpx; font-weight:600; display:block }
.list { display:grid; gap: 12rpx }
.q-item { display:grid; grid-template-columns: 1fr auto; gap: 12rpx; align-items:center; padding: 16rpx; border: 2rpx solid #e6e8ee; border-radius: 18rpx }
.title { font-weight:700; font-size: 28rpx; display:block }
.sub { color:#667085; font-size:22rpx; display:block; margin-top: 4rpx }
.tags { display:flex; gap: 8rpx; margin-top: 8rpx }
.tag { font-size: 20rpx; padding: 4rpx 12rpx; border-radius: 9999rpx; background: #f8fafc; border: 2rpx solid #e6e8ee; color: #475569 }
.ops { display:flex; gap: 10rpx }
.btn-primary { padding: 12rpx 20rpx; border-radius: 14rpx; background: linear-gradient(180deg, #2a7de1, #1f63b5); color: #fff; font-weight: 600; box-shadow: 0 12rpx 28rpx rgba(42, 125, 225, 0.28) }
.btn-outline { padding: 12rpx 20rpx; border-radius: 14rpx; background: #fff; border: 2rpx solid #e6e8ee; color: #1a1f36; font-weight: 600 }

.overlay { position: fixed; left:0; top:0; right:0; bottom:0; background: rgba(15,23,42,.45); display:none; align-items:flex-end; z-index: 99 }
.overlay.show { display:flex }
.sheet { width:100%; background:#fff; border-top-left-radius: 24rpx; border-top-right-radius: 24rpx; box-shadow: 0 -24rpx 60rpx rgba(2,6,23,.28); max-height:74vh; animation: slideUp .22s ease-out }
@keyframes slideUp { from { transform: translateY(20rpx); opacity:.6 } to { transform: translateY(0); opacity:1 } }
.drag { width: 120rpx; height: 10rpx; background: #e2e8f0; border-radius: 9999rpx; margin: 16rpx auto }
.sheet-header { display:flex; align-items:center; justify-content:space-between; padding: 16rpx 20rpx; border-bottom: 2rpx solid #e6e8ee; position:sticky; top:0; background:#fff; z-index:1 }
.sheet-title { font-weight:700; font-size:28rpx }
.sheet-body { padding: 16rpx 20rpx 26rpx; max-height: 60vh }
.kv { display:grid; grid-template-columns: auto 1fr; gap: 8rpx 20rpx; font-size: 24rpx; align-items:center }
.k { color:#667085 }
.v { font-weight:700 }
.v.warn { color:#f59e0b }
.footer { display:grid; grid-template-columns:1fr 1fr; gap: 12rpx; margin-top: 16rpx }
</style>


